<template>
  <!-- 多柱状图 -->
  <div ref="echarts"
       id="mains">
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {

    }
  },
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    option: {
      handler (newval, oldval) {
        console.log(newval, oldval);
        this.option = newval
        this.init()
      },
      deep: true,
    },
  },
  methods: {
    init () {
      console.log("this.option", this.option);
      const { unitA, yearData, seriesData, color } = this.option
      var myChart = echarts.init(this.$refs.echarts);
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: yearData,

        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 20,
          name: unitA,
        },
        series: [
          {
            name: '家庭农场',
            data: seriesData,
            barWidth: 12,
            type: 'bar',
            smooth: true,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: color // 柱状图颜色
                  }
                ]),
                barBorderRadius: [2, 2, 0, 0] //圆角大小
              }
            }
          },
        ]
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // option && myChart.setOption(option);
    }
  },
  created () {

  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
#mains {
  width: 100%;
  height: 100%;
}
</style>
